<template>
  <div>
    <div class="erjiDaoHang">
      <router-link active-class="active" to="/home/news">News</router-link>
      <router-link active-class="active" to="/home/message"
        >Message</router-link
      >
    </div>

    <div class="showInfo">
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style scoped>
.erjiDaoHang {
  display: flex;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 20px;
}

.erjiDaoHang a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.erjiDaoHang a:hover {
  background-color: #f5f5f5;
  color: #007bff;
}

.erjiDaoHang a:active {
  background-color: #e9ecef;
}

.showInfo {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  min-height: 200px;
}

.showInfo div {
  color: #6c757d;
  font-size: 16px;
  line-height: 1.6;
}
</style>